
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajout  input dynamiquement</title>
<script type="text/javascript">

function refresh(event){
        //On sélectionne le premier et le deuxième fieldset
        var liste = document.getElementById("liste_deroulante");
        var text_fieldset = document.getElementById("zone_text");
        
        //On récupère la position de notre champ texte
        var node_source = (document.all)?event.srcElement:event.target;
        var position = node_source.previousSibling.nodeValue.split(" ")[1];
        
        //On récupère la valeur dans la champ texte
        var labels = text_fieldset.getElementsByTagName("label");
        var label = labels[position-1];
        var input = label.getElementsByTagName("input")[0];
        
        //On met à jour la liste déroulante
        var option = liste.getElementsByTagName("option")[position-1];
        option.firstChild.nodeValue = input.value;
}

function del(event){
        //on sélectionne le premier fieldset et on récupère tous les label qu'il y a à l'intérieur
        var text_fieldset = document.getElementById("zone_text"); 
        var labels = text_fieldset.getElementsByTagName("label");
        
        //On récupère le noeud qui émet l'évènement et sa position grâce au texte Valeur x
        var node_source = (document.all)?event.srcElement:event.target;
        var position = node_source.previousSibling.firstChild.nodeValue.split(" ")[1];
        
        //On décale d'un cran inférieur tous les éléments situés après l'élément à supprimer
        for(var i=position;i<labels.length;i++){
                var label = labels[i];
                var input = label.getElementsByTagName("input")[0];
                
                input.setAttribute("name","nom"+i);
                
                label.firstChild.nodeValue = "Valeur "+i+" ";
        }
        
        //Suppression de la zone de texte, du lien et du saut de ligne
        var label = labels[position-1];
        var lien = label.nextSibling;
        var br = lien.nextSibling;
        text_fieldset.removeChild(label);
        text_fieldset.removeChild(lien);
        text_fieldset.removeChild(br);
        
        //Suppression de l'élément d'option
        var liste = document.getElementById("liste_deroulante");
        var select = liste.getElementsByTagName("select")[0];
        var option = select.getElementsByTagName("option")[position-1];
        select.removeChild(option);
        
}

function add(){
        //On compte le nombre de label et on sélectionne le premier fieldset
        var count = document.getElementsByTagName("label").length;
        var text_fieldset = document.getElementById("zone_text");
        count ++;
        
        //création du label( <label>Valeur x <input type="text" name="nomx" value="" /></label>)  
        var input = document.createElement("input");
        input.setAttribute("type","text");
        input.setAttribute("name","nom"+count);
        input.setAttribute("value","");
        
        if(document.all) input.attachEvent("onkeyup",refresh);
        else input.addEventListener("keyup",refresh,true);
        
        var nom_label = document.createTextNode("Valeur "+count+" ");
        var label = document.createElement("label");
        label.appendChild(nom_label);
        label.appendChild(input);
		  
        ////cas avec bouton supprimer //ne marche pas !!!
        //Création des élement br et p ( <p class="lien">Supprimer</p><br /> )
        /*
		var br = document.createElement("br"); 
		  var p_del = document.createElement("p");
		  var bouton_del=document.createElement("input");
        input.setAttribute("type","button");
        input.setAttribute("name","BT_"+count);
        input.setAttribute("value","Supprimer");
		  
		  if(document.all) bouton_del.attachEvent("onkeyup",del);
        else bouton_del.addEventListener("keyup",del,true);
		  
		  p_del.appendChild(bouton_del);
		  */
		  //cas avec lien Supprimer  /// fonctionne
		
        var del_text = document.createTextNode("Supprimer");
        var lien_del = document.createElement("p");
        lien_del.setAttribute("class","lien");
        lien_del.setAttribute("className","lien");
			
        if(document.all) lien_del.attachEvent("onmouseup",del);
        else lien_del.addEventListener("mouseup",del,true);
        
        lien_del.appendChild(del_text);
			
        //On raccroche ici tous nos éléments virtuels à une balise de notre fichier XHTML. Ils sont alors affichés   
        text_fieldset.appendChild(label);
        //text_fieldset.appendChild(lien_del);
        text_fieldset.appendChild(bouton_del);
        text_fieldset.appendChild(br);
        
        //Ajout d'un élément d'option vide dans notre liste ( <option value=""></option> )
        var liste = document.getElementById("liste_deroulante");
        var select = liste.getElementsByTagName("select")[0];
        var option = document.createElement("option");
        var texte = document.createTextNode("valeur"+count);
        option.setAttribute("value","nom"+count);
        option.appendChild(texte);
        select.appendChild(option);
        
 
}
</script>
</head>
<body>

<p id="testbox">If you see information appearing in the current box when you click in a text field javascript is enabled on your computer</p>
                <div class="javascript">
                        <form action="" method="post">
                                <fieldset id="zone_text">
                                        <!-- <p class="lien" onClick="javascript:add()">Ajouter un champ texte</p><br /> -->
                                        <input type="button" class="lien" onClick="javascript:add()" value="Ajouter un champ texte" /><br />
                                </fieldset>
                                <fieldset id="liste_deroulante">
                                        <select name="liste">
                                        </select>
                                        <input type="submit" value="Valider" /><br /><br />
                                </fieldset>
                        </form>
                </p>
                <script type="text/javascript">
                        add();
                </script>
</body>
</html>